<template>
  <div id="app">
    <router-view  @up="backTop"></router-view>
    <transition enter-active-class="bounceIn" leave-active-class="bounceOutUp">
      <div id="backtop" class="backtop animated" v-show="goTop" @click="backTop()">
          <div class="level-2" ></div>
      </div>
    </transition>
  </div>
</template>

<script>
import {showBack, animate} from './assets/js/util.js'
export default {
  name: 'app',
  data () {
    return {
      /*返回顶部*/
      goTop:false,
      gotopClick: false,
      positionTop: 0,
      backgroundPosition: "-344px",
      mousePos: null
    }
  },
  methods: {
    //返回顶部
    backTop(){
      animate(document.documentElement, {scrollTop: '0'}, 400,'ease-out');
    },
    /*返回顶部出现*/
    animateFun(){
      //开始监听scrollTop的值，达到一定程度后显示返回顶部按钮
      showBack(status => {
        this.goTop = status;
        if(status === false){
          document.getElementById("backtop").style.top="80%"
          document.getElementById("backtop").style.backgroundPosition = "-790px"
        }else{
          document.getElementById("backtop").style.backgroundPosition = "-45px"
        }
      });
    }
  },
  mounted(){
    this.animateFun()
    //防止页面后退
    var that = this;
    var allowBack = this.$router.allowBack;
    window.onpopstate = () => {
      if (!allowBack) {    
          window.history.go(1)
      }
    }
    
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import './assets/css/reset.css';
  @import './assets/css/animate.css';
  @import './assets/css/index.styl';
  // 流水查询通用
  @import './assets/css/accountQuery.styl'
</style>